<div class="panel panel-warning">
    <div class="panel-heading">
        <h3 class="panel-title">Cambiar contrase&ntilde;a</h3>
    </div>
    <div class="panel-body">
        <form class="form-horizontal" name="frmChangePassword" method="POST" role="form">
            <div class="form-group">
                <label for="txtOldPassword" class="col-sm-2 control-label">Antigua contrase&ntilde;a</label>
                <div class="col-sm-4">
                    <input type="password" class="form-control" id="txtOldPassword" name="txtOldPassword" maxlength="20" placeholder="Introduzca la antigua contrase&ntilde;a">
                </div>
            </div>
            <div id="pnlContrasena" class="form-group">
                <label for="txtNewPassword" class="col-sm-2 control-label">Nueva contrase&ntilde;a</label>
                <div class="col-sm-4">
                    <input type="password" class="form-control" id="txtNewPassword" name="txtNewPassword" maxlength="20" placeholder="Introduzca la nueva contrase&ntilde;a">
                </div>
                <div class="form-group">
                    <label for="txtNewPasswordRepeat" class="col-sm-2 control-label">Repetir contrase&ntilde;a</label>
                    <div class="col-sm-4">
                        <input type="password" class="form-control" id="txtNewPasswordRepeat" name="txtNewPasswordRepeat" maxlength="20" placeholder="Repita la nueva contrase&ntilde;a">
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button name="btnGuardar" type="submit" class="btn btn-success">Guardar</button>
                    <a class="btn btn-default" href="index.php?do=/user/profile/{IdUsuario}" role="button">Volver</a>
                </div>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript">
    $("#txtOldPassword").keypress(function(event) {
        if (event.charCode != 0) {
            var regex = new RegExp("^[a-zA-Z0-9]+$");
            var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
            if (!regex.test(key)) {
                event.preventDefault();
                return false;
            }
        }
    });
    $("#txtEmail").change(function() {
        $.ajax({
            "url": "index.php?do=/user/ajax_check_available_email",
            "type": "POST",
            "async": true,
            "data": {
                email: $(this).val()
            },
            "success": function(result) {
                switch (result) {
                    case "[false]":
                        $("#pnlEmail").addClass("has-error has-feedback");
                        $("#txtEmail").parent().append("<span id=\"icoEmail\" class=\"glyphicon glyphicon-remove form-control-feedback\"></span>");
                        break;
                    case "[true]":
                        $("#pnlEmail").addClass("has-success has-feedback");
                        $("#txtEmail").parent().append("<span id=\"icoEmail\" class=\"glyphicon glyphicon-ok form-control-feedback\"></span>");
                        break;
                    default:
                        console.error("La logica del sistema fallo.", result);
                        break;
                }
            },
            "error": function(result) {
                console.error(result);
            }
        });
    });
    
    $("#txtNewPassword").keypress(function(event) {
        if (event.charCode !== 0) {
            var regex = new RegExp("^[a-zA-Z0-9]+$");
            var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
            if (!regex.test(key)) {
                event.preventDefault();
                return false;
            }
        }
    });
    $("#txtNewPassword").change(function() {
        $("#pnlContrasena").removeClass("has-success has-feedback");
        $("#pnlContrasena").removeClass("has-error has-feedback");

        if ($("#txtNewPasswordRepeat").val().length > 0) {
            $("#txtNewPasswordRepeat").val("");
        }
    });

    $("#txtNewPasswordRepeat").keypress(function(event) {
        if (event.charCode !== 0) {
            var regex = new RegExp("^[a-zA-Z0-9]+$");
            var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
            if (!regex.test(key)) {
                event.preventDefault();
                return false;
            }
        }
    });
    $("#txtNewPasswordRepeat").change(function() {
        $("#pnlContrasena").removeClass("has-success has-feedback");
        $("#pnlContrasena").removeClass("has-error has-feedback");

        if ($("#txtNewPassword").val() == $("#txtNewPasswordRepeat").val()) {
            $("#pnlContrasena").addClass("has-success has-feedback");
        } else {
            $("#pnlContrasena").addClass("has-error has-feedback");
        }
    });
    
    $("#frmChangePassword").submit(function(event) {
        var hasError = true;
        var errorMsg = "";
        
        console.debug($("#txtNewPassword").val(), $("#txtNewPasswordRepeat").val());
        
        if($("#txtNewPassword").val().length >= 6 &&
           $("#txtNewPasswordRepeat").val().length >= 6 &&
           ($("#txtNewPassword").val().length === $("#txtNewPasswordRepeat").val().length) &&
           ($("#txtNewPassword").val() === $("#txtNewPasswordRepeat").val())) {
            console.debug("validoo");
            hasError = true;
            errorMsg += "> Contraseña y su verificacion\n";
        }
        
        if(hasError) {
            alert("Debe completar los siguentes campos:\n" + errorMsg);
            event.preventDefault();
        }
    });
</script>